<template>
  <div>
    <div style="float: right">
      <div style="display: inline-block; color: red;font-weight: bolder;">请选择推送平台:</div>
      <div style="display: inline-block">
        <el-input @keyup.enter.native="searchEnterFun($event)" placeholder="请输入知识名称" v-model="name">
          <el-select @change="selectItem" collapse-tags slot="prepend"
                     v-model="bindingPlatform"
                     style="width: 180px;" placeholder="请选择推送平台">
            <el-option
              v-for="platform in bindingPlatforms"
              :key="platform.id"
              :label="platform.name"
              :value="platform.id">
            </el-option>
          </el-select>
          <i class="el-input__icon el-icon-search" slot="prefix"></i>
          <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
        </el-input>
      </div>
    </div>
    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div>
        <div :item="item" :key="item.name" v-for="item in items">
          <div style="display: inline-block;text-align: right;width: 100px;margin-top: 10px"><span>{{item.name}}</span>
          </div>
          <div style="display: inline-block">
            <el-cascader
              :options="item.tagId"
              :props="cascadeProps"
              :show-all-levels="false"
              @change="handleChange"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 300px"
              v-model="item.subject"
            ></el-cascader>
          </div>
        </div>
        <div style="width: 100px;text-align:right; display: inline-block;margin-top: 10px">应用平台</div>
        <div style="display: inline-block">
          <el-select v-model="platform" placeholder="应用平台" size="small" style="width: 300px">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in platforms"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="display: inline-block;text-align: right;width: 100px">公式类型</div>
      <div style="display: inline-block;margin-top: 10px">
        <el-select clearable placeholder="公式类型" size="small" style="width: 300px" v-model="type">
          <el-option
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="item in types">
          </el-option>
        </el-select>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">推送时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            @change="dateChange"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            size="small"
            start-placeholder="开始日期"
            style="width: 300px;" type="datetimerange"
            v-model="createTime" value-format=" yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">状态</div>
        <div style="display: inline-block;">
          <el-select v-model="syncStatus" clearable placeholder="状态" size="small" style="width: 300px;">
            <el-option
              v-for="item in CONST.SYNC_STATUS"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 30px; right: 10px;">
        <el-row>
          <el-col :offset="7" :span="9">
            <div style="margin-left: 90px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div style="margin-left:5px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="replacement">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="1">
            <div style="height: 32px; width: 88px;">
              <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MedicalCalculatorSyncSearch",
    data() {
      return {
        show: "true",
        noData: false,
        showAdvance: false,
        appendIcon: "el-icon-caret-bottom",
        createTime: '',
        platforms: [],
        platform: [],
        name: '',
        types: [{
          value: 1,
          label: '计算型'
        }, {
          value: 2,
          label: '评分型'
        }, {
          value: 3,
          label: '描述型'
        }],
        type: '',
        cascadeProps: {multiple: true, checkStrictly: true},
        subject: [],
        bindingPlatform: '',
        bindingPlatforms: [],
        syncStatus: ''
      }
    },
    methods: {
      searchEnterFun(e) {
        const keyCode = window.event ? e.keyCode : e.which;
        if (keyCode === 13) {
          this.$emit('confirm', 'isFromChild');
        }
      },
      advanceCancel: function () {
        this.showAdvance = false;
      },
      advanceConfirm: function () {
        this.advanceCancel();
        this.$emit('confirm', 'isFromChild');
      },
      replacement: function () {
        for (let i = 0; i < this.items.length; i++) {
          this.items[i].subject = '';
        }
        this.name = '';
        this.subject = '';
        this.platform = '';
        this.type = '';
        this.createTime = '';
        this.syncStatus = '';
      },
      handleChange(value) {
        this.subject = value;
      },
      switchAppend: function () {
        if (this.showAdvance) {
          this.showAdvance = false;
          this.appendIcon = "el-icon-caret-bottom";
        } else {
          this.showAdvance = true;
          this.appendIcon = "el-icon-caret-top";
        }
      },
      dateChange(val) {
        this.createTime = val;
        if (val == null) {
          this.createTime = ''
        }
      },
      getBindingPlatforms() {
        this.axios.get("/pmph/action/knowledgeLib/selectAllPlatforms", {
          params: {
            type: CONST.SYSTEM.CALCULATOR
          }
        }).then((res) => {
          this.bindingPlatforms = res.data.platforms;
          if (this.bindingPlatforms.length > 0) {
            this.bindingPlatform = this.bindingPlatforms[0].id;
            this.$emit('confirm', 'isFromChild');
          }
        }).catch((err) => {
          console.error(err)
        })
      },
      selectItem(val) {
        this.bindingPlatform = val;
        this.$emit('confirm', 'isFromChild');
      }
    },
    created() {
      this.getBindingPlatforms();
      this.axios.get("/pmph/action/medicalCalculator/selectSubject").then((response) => {
        this.items = response.data.fields;
      })
      this.axios.get("/pmph/action/medicalCalculator/selectPlatform").then((response) => {
        this.platforms = response.data;
      })
    }
  }
</script>

<style scoped>

</style>
